<template>
    <div>
        <div class="ui top attached secondary segment" v-if="$slots.header">
            <slot name="header"></slot>
        </div>
        <table class="ui celled table" :class="{attached: $slots.header}">
            <thead>
                <tr>
                    <th v-for="column in columns" :key="column" v-text="column"></th>
                    <th v-if="$scopedSlots.actions">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="row in rows" :key="row.id">
                    <td :key="column" v-for="column in columns">
                        <slot v-bind:row="row" v-bind:column="column">
                            {{row[column]}}
                        </slot>
                    </td>
                    <td v-if="$scopedSlots.actions">
                        <slot name="actions" v-bind:row="row"></slot>
                    </td>
                </tr>
            </tbody>
             <tfoot v-if="$slots.footer">
                <tr>
                    <th colspan="100">
                        <slot name="footer"></slot>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
export default {
    name: 'data-table',
    props: {
        rows: Array,
        columns: Array,
    },
    data(){
        return {
        }
    },
}
</script>
